View.vue
<template>
  <h1>开关组件</h1>
  <!-- 开关组件默认是布尔类型控制 true打开 false关闭
        还可以使用active-value和inactive-value来自定义开关的打开和关闭状态 额外支持number类型和string类型-->
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
  <br>
  是否为管理员&nbsp<el-switch v-model="isAdmin"></el-switch>
  <hr>
  是否打开图片&nbsp<el-switch v-model="isShow"></el-switch>
  <br>
  <img src="fcq.jpg" width="200px" v-if="isShow">
  <hr>
  <!-- 数字类型控制开关 -->
  <el-switch v-model="num" :active-value="0" :inactive-value="1"></el-switch>
  <!-- 字符串类型控制开关的两种方式 -->
  <el-switch v-model="numStr" :active-value="'0'" :inactive-value="'1'"></el-switch>
  <el-switch v-model="str" active-value="开" inactive-value="关"></el-switch>
</template>

<script setup>
  import { ref } from 'vue'

  const value1 = ref(true)
  const value2 = ref(true)
  const isAdmin = ref(false);
  const isShow = ref(false);
  const num = ref(1);
  const numStr = ref('0');
  const str = ref("关");
</script>

<style scoped>

</style>